<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style type="text/css">
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .wrap {
        display: flex;
        height: 100%;
        flex-direction: column;
      }

      .oper {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        box-sizing: border-box;
      }

      .mapWrap {
        flex: 1;
      }

      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="oper">
        <button onclick="start()">开始实时位置移动</button>
      </div>
      <div class="mapWrap">
        <div id="map"></div>
      </div>
    </div>

    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的ak"
    ></script>
    <script type="text/javascript" src="./Lushu.js"></script>
    <script type="text/javascript">
      var _map;
      var _lushu;
      var _mark;

      var imgData =
        "";

      var _defaultPoints = [117.23886803830499, 31.814027303196376];
      var _poins = [
        "117.23879448592966,31.815032393461742",
        "117.23881077031842,31.81657866732965",
        "117.23876465298383,31.818285143349154",
        "117.23872622187206,31.81963748240916",
        "117.23864394274092,31.821409907180982",
        "117.23855170807272,31.822343727367098",
        "117.23800598628462,31.82269156659383",
        "117.23583847157703,31.822803137386256",
        "117.23506882310862,31.822961888733538",
        "117.23492704007529,31.823756708657697",
        "117.23489397161364,31.825109095599117",
        "117.2348948325554,31.826103493584178",
        "117.23552960799253,31.82672415965811",
        "117.2360315566232,31.82797537885938",
        "117.2370451496599,31.82797537885938",
        "117.23792564462109,31.82794915397653",
        "117.23828398559367,31.827643196454",
        "117.23830446222067,31.826847702102995"
      ];

      var _pointIndex = 0;
      var _timer = null;

      window.onload = function () {
        ininMap();
      };

      function ininMap() {
        _map = new BMapGL.Map("map"); // 创建地图实例
        var point = new BMapGL.Point(117.238, 31.815); // 创建点坐标
        _map.centerAndZoom(point, 18);
        _map.enableScrollWheelZoom(true);
        addMark();
      }

      function addMark() {
        const _point = new BMapGL.Point(_defaultPoints[0], _defaultPoints[1]);
        const _icon = new BMapGL.Icon(imgData, new BMapGL.Size(20, 40));
        _mark = new BMapGL.Marker(_point, { icon: _icon });
        _map.addOverlay(_mark);
      }

      function start() {
        if (_pointIndex != 0) {
          return;
        }
        console.log(_mark.getPosition());
        _lushu = new BMapGLLib.LuShu(_map, null, {
          marker: _mark,
          autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
          totalTime: 5000, //5秒之内移动完成
          enableRotation: true, // 是否设置marker随着道路的走向进行旋转
          startPoint: _mark.getPosition(),
          rotation: 90, //我这里图标车头方向朝上传90，如果方向是朝右传0，旋转车头使用
        });
        nextPoint(_pointIndex);
        _pointIndex++;
        //通过定时器模拟推送或者轮询获取的定位数据
        _timer = setInterval(() => {
          if (_pointIndex > _poins.length - 1) {
            window.clearInterval(_timer);
            _pointIndex = 0;
            return;
          }
          nextPoint(_pointIndex);
          _pointIndex++;
        }, 5000);
      }

      function nextPoint(_index) {
        const _strPoint = _poins[_pointIndex];
        const _point = new BMapGL.Point(
          _strPoint.split(",")[0],
          _strPoint.split(",")[1]
        );
        _lushu.next(_point);
      }
    </script>
  </body>
</html>
